본문으로 건너뛰기

23.05.12

오늘 한 일​

  • 알고리즘 문제 풀이
  • 쿠버네티스 스터디 강의 Kubernetes를 통한 클라우드 조정 수강
  • nest.js 강의 수강 (4~9강)
  • 익스텐션 개발

익스텐션 개발​

배포 자동화를 어제 했었는데, 수동이 아닌 태그 푸시 시 자동으로 배포되도록 했다.

on:
  push:
    tags:
      - 'v*'

이제 태그를 푸시하면 자동으로 배포가 된다.

git tag v0.0.1

git push origin v0.0.1
# or
git push origin --tags

과제 데이터 크롤링 로직을 완전 바꾸었다!

기존의 방식은 axios로 요청을 보내 document를 직접 파싱했었다. 그리고 과제만을 가져오기 위해 과제 페이지들만 요청을 보내고, 그 페이지들을 파싱했다.

하지만 제출해야하는 과제 뿐만 아니라 동영상 과제, 퀴즈 과제 같은 것도 있기 때문에 수정이 필요했다.

전체 과제들을 한 번에 가져올 수 있는 페이지는 강의 페이지다. 그래서 f12를 켜서 본격적으로 분석을 시작했다.

과제에 해당하는 엘리먼트, 동영상 과제에 해당하는 엘리먼트 등 쭉 훑어보니 공통점이 있었다.

과제

image

동영상 과제

image

파일

image

정리하면

모든 과제 데이터는 activity클래스를 가진 엘리먼트 안에 있다.

  • 과제: assign
  • 동영상 과제: vod
  • 파일: ubfile
  • 폴더: folder
  • 퀴즈: quiz
  • 과목 공지, 질의 응답: ubboard
  • 라벨: label

그리고 activityinstance 클래스를 가진 엘리먼트 안에는 정보들이 들어있다. displayoptions에는 과제 제출 기한이 들어있고, instancename에는 과제 제목이 들어있다.

이제 이 정보들을 이용해서 과제 데이터를 가져오면 된다.

cheerio 라이브러리를 사용하여 쉽게 파싱했다.

/**
 * 과제 데이터를 가져온다.
 */
const assign = $('.activity.assign').map((i, el) => {
  const id = getLinkId($(el).find('a').attr('href'));
  const title = $(el).find('.instancename').text();
  const [startAt, endAt] = $(el)
    .find('.displayoptions')
    .text()
    .split(' ~ ')
    .map((date) => new Date(date));

  if (isNaN(startAt.getTime()) || isNaN(endAt.getTime())) {
    return;
  }

  return {
    id,
    courseId,
    title,
    startAt,
    endAt,
  };
});

/**
 * 동영상 과제 데이터를 가져온다.
 */
const vod = $('.activity.vod').map((i, el) => {
  const id = getLinkId($(el).find('a').attr('href'));
  const title = $(el).find('.instancename').text();
  const [startAt, endAt, timeInfo] = $(el)
    .find('.displayoptions')
    .text()
    .split(/ ~ |,/)
    .map((str) => {
      const time = str.trim();
      const date = new Date(time);
      if (isNaN(date.getTime())) {
        return time;
      }
      return date;
    });

  return {
    id,
    courseId,
    title,
    startAt,
    endAt,
    timeInfo,
  };
});

데이터 타입도 수정했다.

export interface Course {
  id: string;
  title: string;
  professor: string;
}

export interface Assignment {
  id: string;
  courseId: string;
  title: string;
  startAt: Date;
  endAt: Date;
}

export interface Video {
  id: string;
  courseId: string;
  title: string;
  startAt: Date;
  endAt: Date;
  timeInfo: string;
}

이제 과제 데이터를 가져오는 로직은 완성되었다.

어떻게 UI를 구성할지 고민해봐야겠다.

내일 할 일​

  • 알고리즘 문제 풀이
  • 2시 프로그라피 팀 오프라인 모임
    • 프로젝트 개발 시작